<!-- 商品详情页评论内容 -->
<template>
  <!-- <view class="skuBox"> -->
  <u-popup
    v-model="show"
    mode="bottom"
    border-radius="14"
    @close="closeSkuBox"
    safe-area-inset-bottom
    z-index="10000"
  >
    <div class="coupnnBox">
      <view class="discountCount">
        <text style="font-weight: 700">{{$t('common.coupon')}}</text>
        <view class="closeBox" @click="show = false">
          <i class="iconfont icon-close"></i>
        </view>
      </view>

      <scroll-view class="options" scroll-y>
        <view class="couponBox">
          <view class="couponList">
            <view
              v-for="(item,index) in discountData.list"
              :key="index"
              class="couponItem"
            >
              <view class="couponTop">
                <!-- <text class="tip">新获得</text> -->
                <!-- 有效期 -->
                <view class="couponInfo">
                  <text>{{ item.name }}</text>
                  <!-- 领取开始限时天数 -->
                  <text v-if="item.expire_type == 1"
                    >{{$t('coupon.date1')}}{{
                      item.expire_day == 0 ? $t('member.permanent') : item.expire_day + $t('coupon.date2')
                    }}</text
                  >
                  <!-- 开始结束日期 -->
                  <text v-else-if="item.expire_type == 2"
                    >{{ item.begin_time | dateFilter }}-{{
                      item.end_time | dateFilter
                    }}</text
                  >
                </view>

                <!-- 优惠金额 -->
                <view class="couponMoney">
                  <!-- 满减卷 -->
                  <view v-if="item.discount_type == 2">
                    <view class="money">
                      <text>￥</text>
                      <text>{{ item.sub_price }}</text>
                    </view>
                    <view class="flex-x-center"
                      >{{$t('coupon.price1')}}{{ item.min_price }}{{$t('coupon.price2')}}</view
                    >
                  </view>
                  <!-- 打折卷 -->
                  <view v-else-if="item.discount_type == 1" class="money">
                    <view class="money">
                      <text></text>
                      <text>{{ item.discount }}</text>
                      <text style="">{{$t('clerk.member2')}}</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="couponBottom">
                <view class="rulesBox">
                  <view class="rules">
                    <u-collapse
                      class="collapse"
                      ref="collapse"
                      :head-style="{
                        padding: 0,
                        lineHeight: '48rpx',
                        color: '#666',
                        fontSize: '24rpx',
                      }"
                      :body-style="{
                        fontSize: '24rpx',
                        color: '#999',
                      }"
                    >
                      <u-collapse-item :title="$t('facePay.detail')">
                        {{ item.rule }}
                      </u-collapse-item>
                    </u-collapse>
                  </view>
                </view>
                <text v-if="!item.select" class="btn" @click="onReceive(item)"
                  >{{$t('coupon.toGet')}}</text
                >
                <text v-else class="btn select-btn">{{$t('coupon.getted')}}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <view class="submit-bt flex-y-center flex-x-center">
        <view @click="show = false">{{$t('cart.complate')}}</view>
      </view>
    </div>
  </u-popup>
  <!-- </view> -->
</template>

<script>
import utils from "@/common/utils.js";
export default {
  data() {
    return {
      // itemList: [
      //   {
      //     head: "赏识在于角度的转换",
      //     body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
      //     open: true,
      //     disabled: true,
      //   },
      //   {
      //     head: "生活中不是缺少美，而是缺少发现美的眼睛",
      //     body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
      //     open: false,
      //   },
      //   {
      //     head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
      //     body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
      //     open: false,
      //   },
      // ],
      show: false,
      card: [],
      coupon: [],
    };
  },
  props: {
    discountData: {
      type: Object,
      default: () => {
        return {
          list: [],
        };
      },
    },
    goodsId: {
      type: Number,
      default: 0,
    },
    type: {
      type: String,
      default: "",
    },
  },
  methods: {
    showPopup() {
      this.show = true;
      this.$nextTick(() => {
        // 给每个折叠面板重新计算高度  内置方法
        this.$refs["collapse"]?.forEach((item) => {
          item.init();
        });
      });
    },
    // 关闭弹框
    closeSkuBox() {
      this.$emit("close");
    },
    // 点击立即领取
    async onReceive(data) {
      let index = this.discountData.list.findIndex((item) => {
        return item.id == data.id;
      });
      this.$set(this.discountData.list[index], "select", true);
      try {
        const res = await this.$allrequest.goods.couponReceive({ id: data.id });
        if (res.code != 0) throw res;
        this.$utils.toast(this.$t('coupon.success'));
      } catch (err) {
        this.$set(this.discountData.list[index], "select", false);
        this.$utils.toast(err.msg || this.$t('user.err'));
      }
    },
  },
  watch: {
    show(e) {
      if (e) {
      }
    },
  },
  filters: {
    dateFilter(date) {
      if (!date) return "";
      // return date
      return utils.turnDate(date * 1000, "yyyy-mm-dd");
    },
  },
};
</script>

<style lang="scss" scoped>
.skuBox {
  position: relative;
  z-index: 9999;
}
.coupnnBox {
  height: calc(100vh - 400rpx);
  display: flex;
  flex-direction: column;
  .options {
    height: 0;
    flex: 1;
  }
}
.discountCount {
  padding: 0 34rpx;
  position: relative;
  width: 100%;
  height: 98rpx;
  min-height: 98rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;
  color: #262626;
  font-weight: 500;
  .closeBox {
    position: absolute;
    top: 30rpx;
    right: 35rpx;
    width: 40rpx;
    height: 40rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

.optionItem {
  padding: 12rpx 36rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 60rpx;
  .optionCotent {
    display: flex;
    align-items: center;
    .tip {
      font-size: 20rpx;
      color: #f22b11;
      padding: 4rpx 10rpx;
      border-radius: 4rpx;
      background-color: #fee9e6;
      margin-right: 30rpx;
    }
    .content {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #2e2d2d;
      text:nth-child(2) {
        color: #f7271f;
      }
    }
  }
}

.couponBox {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  $backgrounHuise: #f5f5f5;
  background: $backgrounHuise;
  .couponList {
    padding: 12rpx 36rpx;
    .couponItem {
      background: #fff;

      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 24rpx;
      .couponTop {
        position: relative;
        width: 100%;
        padding: 38rpx 30rpx;
        border: 1px solid #f8f8f8;
        border-bottom: none;
        border-radius: 15rpx 15rpx 24rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .couponInfo {
          display: flex;
          flex-direction: column;
          font-size: 22rpx;
          color: #8c8c8c;
          text:nth-child(1) {
            font-size: 32rpx;
            color: #262626;
            font-weight: 500;
            margin-bottom: 20rpx;
          }
        }
        .couponMoney {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 22rpx;
          color: #8c8c8c;
          .money {
            display: flex;
            align-items: baseline;
            font-size: 28rpx;
            font-weight: 500;
            color: #f7271f;
            text:nth-child(2) {
              font-size: 56rpx;
            }
          }
        }
        .tip {
          position: absolute;
          right: 0;
          top: 0;
          height: 30rpx;
          padding: 0 14rpx;
          font-size: 20rpx;
          color: #f7271f;
          border-radius: 0 15rpx 0 15rpx;
          background-color: #fee9e6;
        }
      }
      .couponTop::before {
        position: absolute;
        content: "";
        width: 616rpx;
        border-top: 2rpx dashed #eee;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .couponBottom {
        position: relative;
        width: 100%;
        padding: 25rpx 30rpx;
        border: 1px solid #f8f8f8;
        border-top: none;
        border-radius: 24rpx 24rpx 0rpx 0rpx;
        display: flex;
        justify-content: space-between;
        .rulesBox {
          flex: 1;
          width: 0;
        }
        .btn {
          margin-left: 20rpx;
          width: 140rpx;
          min-width: 140rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          border-radius: 24rpx;
          background-color: #f7271f;
          font-size: 24rpx;
          color: #fff;
        }
        .select-btn {
          background: #fee8e6;
          color: #f0250e;
        }
        &::before {
          content: "";
          position: absolute;
          top: -15rpx;
          left: -15rpx;
          background: $backgrounHuise;
          width: 30rpx;
          height: 30rpx;
          border-radius: 15rpx;
        }
        &::after {
          content: "";
          position: absolute;
          top: -15rpx;
          right: -15rpx;
          background: $backgrounHuise;
          width: 30rpx;
          height: 30rpx;
          border-radius: 15rpx;
        }
      }
    }
  }
}
.submit-bt {
  height: 98rpx;
  background: #fff;
  > view {
    width: 678rpx;
    line-height: 76rpx;
    text-align: center;
    background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
    border-radius: 120rpx;
    font-weight: 600;
    font-size: 26rpx;
    color: #ffffff;
  }
}
</style>
